<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../../docs/image3D.png">
    <script src="../../build/image3D.js"></script>
    <title>缓冲区 - 顶点 | 测试</title>

    <!-- 顶点着色器 -->
    <script type='x-shader/x-vertex' id='vs'>
        attribute vec4 a_position;
        attribute vec4 a_color;
        varying vec4 v_color;
        void main(){
            gl_Position=a_position;
            v_color=a_color;
        }
    </script>

    <!-- 片段着色器 -->
    <script type='x-shader/x-fragment' id='fs'>
        precision mediump float;
        varying vec4 v_color;
        void main(){
            gl_FragColor=v_color;
        }
    </script>

</head>

<body>

    <h2>
        Tips:你应该看见三个彩色的三角形，由近到远，尺寸越来越大！
    </h2>

    <canvas width=500 height=500>非常抱歉，您的浏览器不支持canvas!</canvas>

    <script>

        var core = image3D.core(document.getElementsByTagName('canvas')[0]);

        // 启用着色器
        core.shader(
            document.getElementById('vs').innerHTML,
            document.getElementById('fs').innerHTML
        );

        // 获取画笔
        var painter = core.painter();

        // 数据
        var data = new Float32Array([
            0.0, 0.75, -0.4, 0.4, 1.0, 0.4, // 绿色三角形，最后面
            -0.75, -0.75, -0.4, 0.4, 1.0, 0.4,
            0.75, -0.75, -0.4, 1.0, 0.4, 0.4,

            0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形，中间
            -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
            0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

            0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // 蓝色三角形，最前面
            -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
            0.5, -0.5, 0.0, 1.0, 0.4, 0.4
        ]);

        // 初始化缓冲区
        var buffer = core.buffer()
            // 数据写入缓冲区
            .write(data)
            // 写入缓冲区的数据分配
            .use('a_position', 3, 6, 0)
            .use('a_color', 3, 6, 3);

        // 绘制三个三角形
        painter.triangles(0, 9);

    </script>

</body>

</html>
